import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isShow: false
    }
  }
  render() {
    const {isShow} = this.state
    return (
      <div>
        <button onClick={e => this.setState({isShow: !isShow})}>切换</button>
        {/* {isShow && <h2>hahahah</h2>} */}

        {/* 动画使用 */}
        <CSSTransition timeout={2000} in={isShow} classNames={'title'} unmountOnExit={true}
        onEnter={e => console.log('开始进入动画')}
        onEntering={e => console.log('执行进入动画')}
        onEntered={e => console.log('动画进入结束')}
        onExit={e => console.log('开始离开动画')}
        onExiting={e => console.log('执行离开动画')}
        onExited={e => console.log('执行离开结束')}
        >
          <h2>hahahahha </h2>
        </CSSTransition>
      </div>
    )
  }
}

export default App